<style scoped>
    .reportdetail {
      margin-top: 0.88rem;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .rep-detail{
      width: 100%;
      height: 3.26rem;
      background: url(../assets/img/repdetail.png) no-repeat;
      background-size:100% 100%;
      padding: 0 0.28rem;
      padding-top: 0.46rem;
    }
  .dep-title{
    font-size: 16px;
    color: #FFFFFF;
    font-weight: bold;
  }
  .dep-title2{
    font-size: 16px;
    color: #FFFFFF;
    width: 100%;
    margin-top: 0.24rem;
  }
  .rep-container{
    width: 6.94rem;
    height:4.92rem;
    margin: 0 auto;
    border-radius: 0.1rem;
    background: white;
    margin-top: -1.7rem;
    display: flex;
    flex-direction: column;
    -moz-box-shadow:0px 4px 15px #D7E5FA; -webkit-box-shadow:0px 4px 15px #D7E5FA; box-shadow:0px 4px 15px #D7E5FA;
  }
  .rep-container-div{
    display: flex;
    flex-direction: column;
    flex: 1;
    border-bottom:1px solid  #EEEEEE;
  }
  .rep-c-title{
    font-family: PingFang-SC-Regular;
    font-size: 13px;
    color: #333333;
    margin-top: 0.34rem;
    margin-left: 0.7rem;
  }
  .rep-c2-title{
    font-family: PingFang-SC-Regular;
    font-size: 13px;
    margin-top: 0.34rem;
    margin-left: 0.7rem;
    color: #A4A4A4;
  }
  .rep-c2-title span{
    color: #2F99E0;
    display: inline-block;
    margin-right: 0.1rem;
    font-weight: bold;
  }
  .rep-container2{
    width: 6.94rem;
    height:3.96rem;
    margin: 0 auto;
    border-radius: 0.1rem;
    background: white;
    display: flex;
    padding-left: 0.2rem;
    padding-top: 0.1rem;
    margin-top: 0.16rem;
    flex-direction: row;
    -moz-box-shadow:0px 4px 15px #D7E5FA; -webkit-box-shadow:0px 4px 15px #D7E5FA; box-shadow:0px 4px 15px #D7E5FA;
  }
  .rep-line{
    width: 0.1rem;
    height: 0.34rem;
    background-image: linear-gradient(0deg, #3CBCFF 0%, #2094FA 100%);
  }
  .rep2-title{
    font-size: 16px;

  }
  .rep-box-left{
    width: 65%;
    float: left;
  }
  .rep-box-right{
    width: 35%;
    float: left;
  }
  .rep-box-top{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .rep2-title{
    margin-left: 0.3rem;
    font-size: 16px;
  }
  .rep-right{
    display: flex;
    flex-direction: column;
    font-size: 16px;
    margin-top: 0.4rem;
  }
  .rep-ys{
    width: 0.24rem;
    height: 0.24rem;
    display: inline-block;
    margin-right: 0.2rem;
  }
  .blue{
    background: #2EA9FD ;
  }
  .red{
     background: #FE8DA3;
  }
  .blue2{
    background: #BB8DF5;
  }
  .yellow{
    background: #FFCD48 ;
  }
  .green{
    background: #2ED69F ;
  }
  .box-list{
    margin-top: 0.06rem;
  }
  .charts{
    position: absolute;
    left: -80px;
    bottom: 0px;
    width: 300px;
    height: 300px;
  }

</style>
<template>
    <div class="reportdetail">
        <navx></navx>
        <div class="rep-detail">
            <div class="dep-title">已经超过了92%的同学，太棒了，继续努力！</div>
            <div class="dep-title2">周报2018.09.13-2018.09.20</div>
        </div>
        <div class="rep-container">
            <div class="rep-container-div">
              <div class="rep-c-title">
                <span>全站最高答题量</span><span style="display: inline-block;margin-left: 2rem">我的答题量</span>
              </div>
              <div class="rep-c2-title">
                <span style="margin-left: 0.2rem">1120</span>道<span style="display: inline-block;margin-left: 2.8rem">130</span>道
              </div>
            </div>
          <div class="rep-container-div">
            <div class="rep-c-title">
              <span>我的正确率</span><span style="display: inline-block;margin-left: 2.6rem">我的排名</span>
            </div>
            <div class="rep-c2-title">
              <span style="margin-left: 0.2rem">80%</span>
              <span style="display: inline-block;margin-left: 3rem">80/1000</span>
            </div>
          </div>
            <div class="rep-container-div" style="border-bottom: none">
              <div class="rep-c-title">
                <span>我的答题/应答题</span><span style="display: inline-block;margin-left: 2rem">累计答题</span>
              </div>
              <div class="rep-c2-title">
                <span style="margin-left: 0.2rem">3/480</span>
                <span style="display: inline-block;margin-left: 2.9rem">1000</span>次
              </div>
            </div>
        </div>
        <div class="rep-container2">
            <div class="rep-box-left">
              <div class="rep-box-top">
                <div class="rep-line"></div>
                <span class="rep2-title">全站正确率分布情况</span>
                <div class="charts">
                  <high :id="id" :option="option"></high>
                </div>
              </div>
            </div>
            <div class="rep-box-right">
              <div class="rep-right">
                  <div>正确区间</div>
                  <div class="box-list" style="margin-top: 0.3rem"><span class="rep-ys blue"></span>100%-90%</div>
                  <div class="box-list"><span class="rep-ys red"></span>90%-80%</div>
                  <div class="box-list" ><span class="rep-ys blue2"></span>80%-70%</div>
                  <div class="box-list"><span class="rep-ys yellow"></span>70%-60%</div>
                  <div class="box-list"><span class="rep-ys green"></span>60%以下</div>
              </div>
            </div>
        </div>
      <div style="width: 100%;height: 600px"></div>
    </div>
</template>

<script>
    import high from '@/components/high'
    import navx from '@/components/navx'
    import axios from 'axios'
    export default {
        name: '',
        data() {
            return {
              id: 'test',
              option: {
                chart: {
                  type: 'pie',//饼图
                  options3d: {
                    enabled: true,//使用3d功能
                    alpha: 60,//延y轴向内的倾斜角度
                    beta: 0,
                  }
                },
                title: {
                  text: ''//图表的标题文字
                },
                subtitle: {
                  text: ''//副标题文字
                },

                plotOptions: {
                  pie: {
                    allowPointSelect: true,//每个扇块能否选中
                    cursor: 'pointer',//鼠标指针
                    depth: 35,//饼图的厚度
                    dataLabels: {
                      enabled: true,//是否显示饼图的线形tip
                    }
                  }
                },
                series: [
                  {
                    type: 'pie',
                    name: '测试用1',//统一的前置词,非必须
                    data: [
                      ['测试1',12],//模块名和所占比，也可以{name: '测试1',y: 12}
                      ['测试2',23],
                      ['测试3',19],
                      ['测试4',29]
                    ]
                  }
                ]
              }
            }
        },components:{
          navx,high
        }, created() {

        }, mounted() {
        var destination = document.querySelector(".highcharts-root");
        var highcharts=document.querySelector(".highcharts-background");
        var credits=document.querySelector(".highcharts-credits");
        destination.style.width=400+'px';
        highcharts.style.display='none';
        credits.style.display='none';
        }, methods: {}
    }
</script>
